<template>
  <a-card class="ax__template SystemDictData" :body-style="bodyStyle" v-if="!dataShowForm">
    <a-flex vertical class="h-100">
      <HeadVue />
      <div class="data__content">
        <TableVue v-if="dataTable.viewMode === 'table'" data-selection-exclude></TableVue>
      </div>
      <FooterVue></FooterVue>
    </a-flex>

    <!-- end -->
  </a-card>

  <FormVue class="ax__template SystemDictData" v-else />
</template>

<script setup lang="ts">
import { bodyStyle } from '@/global/config/gen';
import { dataList } from './data/curd';
import { dataForm, dataShowForm } from './data/form';
import { dataTable } from './data/table';
import FooterVue from './pages/components/AXFooter.vue';
import FormVue from './pages/components/AXForm.vue';
import HeadVue from './pages/components/AXHead.vue';
import TableVue from './pages/table-card/AXTable.vue';

const props = defineProps<{
  id: string;
  data: SystemDict;
}>();

/**
 * @description:
 *  打开窗口加载字典数据
 *
 */
watch(
  props,
  async () => {
    dataTable.value.query.dictType = props.data.dictType;
    dataForm.value.dictType = props.data.dictType;
    dataShowForm.value = false;
    await dataList();
  },
  {
    deep: true,
    immediate: true,
  },
);
</script>

<style lang="scss" scoped></style>
